<template>
  <div class="orter">
    <h1>news</h1>
    <button @click="toDetail('海阔天空' , '3')">粤语</button>
    <button @click="toDetail('alone' , '5')">英语</button>
    <button @click="toDetail('囚鸟' , '4')">国语</button>

    <!-- 三级路由 -->
    <RouterView/>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "News",
});
</script>

<script setup lang="ts">
import {useRouter} from "vue-router"
/* 
  因为setup中的this不是指向组件实例,所以无法拿到$router对象
  我们需要使用一个hook--useRouter,调用这个hook函数,可以得到router对象
  但是在模板中可以直接通过$router获取
*/
//得到router对象
const router = useRouter()

//编程式路由导航
const toDetail = (name: string , time: string) => {
  router.push({
    name: "detailNews",
    params:{
      name: name
    },
    query:{
      time: time
    }
  })
}
</script>

<style scoped >
.orter {
  background-color: aqua;
}
</style>